<template>
	<view v-if="visible" class="gui-fade-in">
		<z-paging-swiper>
			<view slot="top">
				<view class="flex relative flex-top-end	" style="height: 100%;" >
					<freeTabs :size="140" activeColor="red" activeLineBg="linear-gradient(to right, red,red)" 
					activeLineRadius="8rpx" :items="channels"
					activeLineHeight="4rpx"
					:width="750" 
					:activeFontWeight="900" 
					textAlign="center" @change="channelChange" 
					:currentIndex="channelCurrent" />
					<view class="channel-icon absolute"></view>
					<view class="px-10 ">
						<text class="gui-icons text-size-xl">&#xe614;</text>
					</view>
				</view>
			</view>
			<swiper class="swiper" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item v-for="(item, index) in channels">
					<view class="swiper-item">
						<free-swiper-list-item :channelIndex="index" :channel="item" :currentIndex="swiperCurrent"></free-swiper-list-item>
					</view>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<!-- <tm-sheet v-if="!dataList.length" :shadow="24">
			<tm-skeleton model="cardActions"></tm-skeleton>
		</tm-sheet> -->
	</view>
</template>

<script>
	import freeStatus from '@/components/free/free-statusbar.vue'
	import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue'
	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue'
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue'
	import freeTabs from '@/components/free/free-tabs'
	import freeSwiperListItem from '@/components/free/free-swiper-list-item.vue'
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default { 
		mixins: [ZPagingMixin],
		components: {
			tmSheet,
			tmTabs,
			freeTabs,
			tmIcons,
			freeStatus,
			// freeBoard,
			// freeImage,
			// freeArticleAvatar,
			// freeTabs,
			freeSwiperListItem
		},
		props: {
		  visible: Boolean
		},
		data() {
			return {
				swiperCurrent: 0,
				channels: [
					{
						title: '瀑布流频道',
						is_sys: false,
						fixed: false,
						flow_type: 'WATERFALLS'
					},
					{
						title: '组件开发',
						is_sys: false,
						fixed: false,
						flow_type: 'DEVELOP'
					},
					{
						title: '普通模式',
						is_sys: true,
						fixed: true,
						flow_type: 'ORDINARY'
					},
					
				],
				channelCurrent: 0,
			}
		},

		methods: {
			channelChange(e) {
				this.swiperCurrent = e
			},
			transition(e) {
				let dx = e.detail.dx
				this.swiperCurrent = dx
			},
			animationfinish(e) {
				let current = e.detail.current
				this.swiperCurrent = current
				this.channelCurrent = current
			},
		},
	}
</script>

<style lang="less" scoped>
.swiper {
	height: 100%;
}
.channel-icon {
	height: 100%;
	right: 50rpx;
	z-index: 10;
	width: 5%;
	background-image: linear-gradient(to right, rgba(255,255,255,0) ,rgba(255,255,255,1));
	&.bl{
		background-image: linear-gradient(rgba(0,0,0,0) 30%,rgba(0,0,0,1)) !important;
	}
}
</style>
